<template>
  <router-view />
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { useStore } from 'vuex';
  import defaultSettings from '@/settings';
  import { State } from '@/store';
  // import { useRouter } from 'vue-router';

  export default defineComponent({
    setup() {
      const store = useStore<State>();
      // const router = useRouter();

      // watch(route, (oldVal, newVal) => {
      //   localStorage.setItem(
      //     'route',
      //     JSON.stringify([
      //       ...JSON.parse(localStorage.getItem('route') ?? '[]'),
      //       newVal.path
      //     ])
      //   );
      // });

      // const state = ObjectUtil.fromJSON(
      //   localStorage.getItem('boot') ?? '{}'
      // ) as Pick<State, 'account' | 'settings'> | null;
      // if (state?.account) {
      //   store.commit('account/SET_STATE', state.account);
      // }
      // if (state?.settings) {
      //   store.commit('settings/CHANGE_SETTING', state.settings);
      // }

      store.dispatch('account/remoteValidate').then(result => {
        if (result) {
          if (defaultSettings.websocket) {
            store.dispatch('stomp/connect', {
              Authorization: store.getters['account/token'],
            });
          }
        }
      });

      // const info = store.getters['account/info'];
      // const routeTime = store.getters['routes/time'];
      // console.log(router.currentRoute.value.path);
      // if (info.time !== routeTime) {
      //   store.dispatch('routes/filterAsyncRoutes', info).then(() => {
      //     router.replace(router.currentRoute.value.path);
      //   });
      // }
    },
  });
</script>

<style lang="scss">
  //@import '~@/assets/styles/index.scss';

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: $black;
  }

  #nav {
    padding: 30px;

    a {
      font-weight: bold;
      color: #2c3e50;

      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }
</style>
